<template>
  <!-- user主内容区 -->
  <!-- 高度为窗口高度-61px -->
  <main :style="`height:${$store.state.screenHeight - 61}px`">
    <!-- user内容区导航 -->
    <div class="userNav">
      <!-- 与头部2的间隙 -->
      <div class="spacing"></div>
      <!-- 导航条 -->
      <nav>
        <ul>
          <!-- 循环用户导航条数据 -->
          <!-- 选中时修改字体颜色 -->
          <!-- 点击时调用userNavClick事件,并传入index -->
          <li
            v-for="(item, index) of userNavData"
            :key="index"
            :style="nowUserNav == index && 'color:#0182c7'"
            @click="userNavClick(index)"
          >
            {{ item }}
          </li>
        </ul>
      </nav>
    </div>
    <!-- 导航主内容 -->
    <div class="navMain">
      <!-- 面包屑导航和功能区 -->
      <div class="breadcrumbAndFunction">
        <!-- 面包屑 -->
        <div class="breadcrumb">
          <!-- 面包屑列表项 -->
          <!-- 循环遍历面包屑数据 -->
          <!-- 点击时调用changePath方法,将点击的路径传入 -->
          <div
            class="breadcrumbItem"
            v-for="(item, index) of breadcrumbData"
            :key="index"
            @click="changePath(item.path)"
          >
            <span>{{ item.filename }}</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div class="function">
          <div class="sort" @click="changeSortList">
            <span>{{ nowSort }}</span>
            <i class="iconfont icon-arrowdown"></i>
          </div>
          <ul class="sortList">
            <li @click="changeSort(1)">笔记名称</li>
            <li @click="changeSort(2)">创建时间</li>
            <li @click="changeSort(3)">修改时间</li>
            <li @click="changeSort(4)">默认排序</li>
          </ul>
          <div class="addFile" @click="addFileClick($event)">
            <i class="iconfont icon-tianjiawenjian"></i>
          </div>
        </div>
      </div>
      <!-- 文件列表 -->
      <!-- 设置最大高度 -->
      <!-- @contextmenu.prevent="fileListMenu"为在该元素右键时调用fileListMenu，.prevent取消默认事件 -->
      <ul
        class="fileList"
        :style="`height:${$store.state.screenHeight - 142}px`"
        @contextmenu.prevent="fileListMenu($event)"
      >
        <!-- 文件列表项 -->
        <!-- 循环遍历当前文件列表数据 -->
        <!-- 点击时调用fileClick方法,并传入点击的元素数据和下标 -->
        <li
          v-for="(item, index) of $store.state.nowFileList"
          :key="item.id"
          @click="fileClick(item, index)"
          ref="fileItem"
          @contextmenu.prevent="fileMenu($event, item)"
        >
          <!-- 当type为0时图标为文件夹,否则为文件 -->
          <i
            :class="
              item.type == 0
                ? 'iconfont icon-biji'
                : 'iconfont icon-thin-_notebook_p'
            "
          ></i>
          <!-- handleTitle为标题处理数据,当字数大于4时显示省略号 -->
          <div>
            <i class="iconfont icon-jiami" v-if="item.encryption"></i>
            <span>{{ handleTitle(item.title) }}</span>
          </div>
        </li>
      </ul>
    </div>
  </main>
</template>

<script>
export default {
  name: "userMain",
  data() {
    return {
      // 用户列表数据
      userNavData: require("@/assets/json/userNav.json"),
      // 当前渲染的文件列表
      // nowFileList: [],
      // 用户信息数据
      // userData: require("@/assets/json/userData.json"),
      // 当前选择的用户列表
      nowUserNav: 0,
      // 当前点击的文件
      nowClickFile: {},
      // 当前点击的文件下标
      nowIndex: -1,
      // 面包屑数据,pata为-1表示根目录
      breadcrumbData: [
        {
          filename: "我的文档",
          path: 0,
        },
      ],
      // 当前路径
      // nowPath: [],
      // 当前排序方式
      nowSort: "默认排序",
    };
  },
  // props: ["userData"],
  mounted() {
    // console.log("userMainCps");
    // console.log(this.$store.state.nowFileList);
    // this.nowPath.push(this.userData.id);
    // console.log(this.nowPath);
    // this.fileListData = this.userData.noteListData;
    // 当前文件列表为所有文件列表数据
    // this.nowFileList = this.fileListData;
    // 绑定自定义事件，接受文档密码组件密码正确的消息
    this.$bus.$on("getFilePassword", (data) => {
      // 如果点击的是文件夹
      if (this.nowClickFile.type == 0) {
        // console.log(file);
        // 修改当前渲染的文件列表
        this.$store.commit("setNowFileList", this.nowClickFile.data);
        // this.nowFileList = this.nowClickFile.data;
        // 修改当前路径
        this.$store.commit("setNowPath", this.nowClickFile.id, "push");
        // this.nowPath += this.nowIndex;
        // 设置面包屑
        let breadcrumb = {
          filename: this.nowClickFile.title,
          path: this.$store.state.nowPath.length - 1,
        };
        // 添加面包屑数据
        this.breadcrumbData.push(breadcrumb);
        // console.log(this.breadcrumbData);
      } else if (this.nowClickFile.type == 1) {
        // console.log(file);
        console.log(this.nowClickFile.data);
      }
    });

    // 重新获取当前渲染的文件列表数据
    this.$bus.$on("reGetNowFileList", (data) => {
      // console.log("重新获取当前渲染的文件列表数据");
      // console.log(data);
      this.$store.commit("setNowFileList", data);
      // this.nowFileList = data;
    });
  },
  beforeDestroy() {
    this.$bus.$off("getFilePassword");
    this.$bus.$off("reGetNowFileList");
  },
  methods: {
    // 点击个人中心导航列表项
    userNavClick(index) {
      // 如果下标不为当前选择的下标
      if (index != this.nowUserNav) {
        // 当前点击的个人中心列表项为index
        this.nowUserNav = index;
      }
    },
    // 改变路径
    changePath(pathIndex) {
      // 要删除的数组元素个数
      let popSize = this.$store.state.nowPath.length - 1 - pathIndex;
      // console.log(this.$store.state.nowPath[pathIndex]);
      if (pathIndex != this.$store.state.nowPath.length - 1) {
        this.$tools.getNote(this, this.$store.state.nowPath[pathIndex]);
      }
      while (popSize--) {
        // 删除后面的目录，更新面包屑
        this.breadcrumbData.pop();
        // 删除当前目录后面的元素，更新nowPath
        this.$store.commit("setNowPath", { id: "", type: "pop" });
      }
      // console.log(path);
      // 如果为根目录
      // if (path === -1) {
      //   // console.log(this.fileListData);
      //   // 向后端获取总文件列表数据
      //   // 通过ajax获取当前文件列表为总文件列表数据
      //   // this.nowFileList = this.fileListData;
      //   // 当前路径一级目录
      //   while(this.$store.state.nowPath.length>1){

      //   }
      //   this.$store.commit("setNowPath", this.nowClickFile.id, "push");
      //   this.nowPath = "";
      //   // 面包屑数据为初始值
      //   this.breadcrumbData = [
      //     {
      //       filename: "我的文档",
      //       path: -1,
      //     },
      //   ];
      // } else {
      // 向后端获取总文件列表数据
      // 声明当前文件列表，初始值为总文件列表数据
      // 通过ajax获取当前文件列表为文件列表数据
      // let fileList = this.fileListData;
      // 循环遍历直到i<路径长度，如路径为“01”，为了找到所点击的文件目录
      // for (let i = 0; i < path.length; i++) {
      //   // 从根目录逐一寻找到目标目录
      //   fileList = fileList[path[i]].data;
      // }
      // console.log(fileList);
      // 当前文件列表为最后找到的文件列表
      // this.nowFileList = fileList;
      // 与之前文件目录减少的长度
      // let size = this.nowPath.length - path.length;
      // while (size--) {
      // 删除后面的目录，更新面包屑
      // this.breadcrumbData.pop();
      // }
      // 更新当前路径
      // this.nowPath = path;
      // }
    },
    // 改变排序列表，点击排序时调用
    changeSortList() {
      const sortList = document.querySelector(".sortList");
      if (sortList.style.height == "") {
        sortList.style.padding = "10px 0";
        sortList.style.height = "140px";
      } else {
        sortList.style.padding = "";
        sortList.style.height = "";
      }
    },
    // 点击添加文件
    addFileClick(event) {
      // console.log(event.clientX, event.clientY);
      // 获取母元素列表
      const fileListMenu = document.querySelector(".fileListMenu");
      // 如果高度为空
      if (fileListMenu.style.height == "") {
        // fileListMenu.style.height = "";
        // 100毫秒后调用,这样才有动画效果
        setTimeout(() => {
          // 元素位置为点击时鼠标位置
          fileListMenu.style.top = event.clientY + "px";
          fileListMenu.style.left = event.clientX - 125 + "px";
          // 内边距
          fileListMenu.style.padding = "10px 0";
          // 设置列表高度
          fileListMenu.style.height = "110px";
        }, 100);
      } else if (
        //如果元素不在添加文件区域
        !(
          fileListMenu.style.top >= event.clientY - 10 + "px" &&
          fileListMenu.style.top <= event.clientY + 10 + "px"
        )
      ) {
        // 设置列表默认高度
        fileListMenu.style.height = "";
        // 100毫秒后调用,这样才有动画效果
        setTimeout(() => {
          // 元素位置为点击时鼠标位置
          fileListMenu.style.top = event.clientY + "px";
          fileListMenu.style.left = event.clientX - 125 + "px";
          // 内边距
          fileListMenu.style.padding = "10px 0";
          // 设置列表高度
          fileListMenu.style.height = "110px";
        }, 100);
      } else {
        // 隐藏列表
        // 设置列表默认高度
        fileListMenu.style.height = "";
        // 100毫秒后调用,这样才有动画效果
        setTimeout(() => {
          // 内边距设为空
          fileListMenu.style.padding = "";
        }, 100);
      }
    },
    // 右键点击文件列表时调用
    fileListMenu(event) {
      // console.log(event.clientX,event.clientY);
      // 获取母菜单列表元素
      const fileListMenu = document.querySelector(".fileListMenu");
      // 设置列表默认高度
      fileListMenu.style.height = "";
      // 100毫秒后调用,这样才有动画效果
      setTimeout(() => {
        // 元素位置为点击时鼠标位置
        fileListMenu.style.top = event.clientY + 10 + "px";
        fileListMenu.style.left = event.clientX + "px";
        // 内边距
        fileListMenu.style.padding = "10px 0";
        // 设置列表高度
        fileListMenu.style.height = "110px";
      }, 100);
    },
    // 点击文件调用
    fileClick(file, index) {
      this.nowIndex = index;
      this.nowClickFile = file;
      // 如果该文件加密
      if (file.encryption) {
        this.$store.commit("setShowFilePassword", true);
        setTimeout(() => {
          document.querySelector(".filePasswordInput").focus();
        }, 100);
      } else {
        // 如果点击的是文件夹
        if (file.type == 0) {
          console.log(file);
          // 通过ajax获取修改当前渲染的文件列表
          this.$tools.getNote(this, file.noteid);
          // this.nowFileList = file.data;
          // 修改当前路径
          // this.nowPath += index;
          this.$store.commit("setNowPath", { id: file.noteid, type: "push" });
          // this.nowPath.push(file.noteid);
          console.log(this.$store.state.nowPath);
          // 设置面包屑
          let breadcrumb = {
            filename: file.title,
            path: this.$store.state.nowPath.length - 1,
          };
          // 添加面包屑数据
          this.breadcrumbData.push(breadcrumb);
          console.log(this.breadcrumbData);
        } else if (file.type == 1) {
          // console.log(file);
          console.log(file.noteid);
          //跳转到笔记编辑页面
          this.$router.push({ name: 'noteeditorid', params: { id: file.noteid } })
        }
      }
    },
    // 右键点击文件时调用
    fileMenu(event, item) {
      // console.log(item);
      event = event || window.event; //浏览器兼容
      event.cancelBubble = true; //取消事件冒泡
      // console.log(event.clientX,event.clientY);
      // 获取子菜单列表元素
      const fileItemMenu = document.querySelector(".fileItemMenu");
      // 设置列表默认高度
      fileItemMenu.style.height = "";
      // 100毫秒后调用,这样才有动画效果
      setTimeout(() => {
        // 元素位置为点击时鼠标位置
        fileItemMenu.style.top = event.clientY + 10 + "px";
        fileItemMenu.style.left = event.clientX + "px";
        // 内边距
        fileItemMenu.style.padding = "10px 0";
        // 设置列表高度
        fileItemMenu.style.height = "263px";
      }, 100);
      // 设置当前右键的文件
      this.$store.commit("setNowItemFile", item);
      // this.nowItemFile = item;
    },
    // 处理标题
    handleTitle(title) {
      // console.log("处理标题");
      // console.log(title);
      // 如果标题长度大于4
      if (title.length > 5) {
        // 截取字符串并添加...
        return title.slice(0, 5) + "...";
      } else {
        return title;
      }
    },
    // 改变排序
    changeSort(index) {
      const sortList = document.querySelector(".sortList");
      switch (index) {
        case 1:
          this.nowSort = "笔记名称";
          sortList.style.padding = "";
          sortList.style.height = "";
          break;
        case 2:
          this.nowSort = "创建时间";
          sortList.style.padding = "";
          sortList.style.height = "";
          break;
        case 3:
          this.nowSort = "修改时间";
          sortList.style.padding = "";
          sortList.style.height = "";
          break;
        case 4:
          this.nowSort = "默认排序";
          sortList.style.padding = "";
          sortList.style.height = "";
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
main {
  width: 1024px;
  // height: 800px;
  background-color: white;
  position: relative;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  .userNav {
    // position: fixed;
    // top: 60px;
    width: 100%;
    border-bottom: 1px solid #cfcfcf;
    .spacing {
      width: 100%;
      height: 10px;
      background-color: rgb(102, 170, 207);
    }
    nav {
      width: 100%;
      height: 40px;
      background-color: #fff;
      ul {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        // background-color: #cfcfcf;
        li {
          font-size: 14px;
          margin-left: 20px;
          padding: 5px;
          color: #3c3c3c;
          cursor: pointer;
          &:hover {
            color: #0182c7;
          }
        }
      }
    }
  }
  .navMain {
    width: 100%;
    // background-color: rosybrown;
    .breadcrumbAndFunction {
      width: 100%;
      height: 30px;
      background-color: white;
      border-bottom: 1px solid #efefef;
      display: flex;
      justify-content: space-between;
      .breadcrumb {
        // display: inline-block;
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 10px;
        .breadcrumbItem {
          font-size: 13px;
          color: #3c3c3c;
          height: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;
          border-radius: 3px;
          padding-left: 5px;
          transition: all 200ms linear 0s;
          &:hover {
            color: #0182c7;
            background-color: #e3f4fd;
          }
          // 设置最后一个的右内边距
          &:last-of-type {
            padding-right: 5px;
          }
          // 隐藏最后一个箭头
          &:last-of-type i {
            display: none;
          }
          // line-height: 30px;
          // i {
          // margin: 0 1px;
          // }
        }
      }
      .function {
        width: 130px;
        height: 100%;
        // background-color: #bfe6fd;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        position: relative;
        .sort {
          width: 80px;
          height: 20px;
          font-size: 12px;
          // background-color: wheat;
          border: 1px solid #0497e6;
          border-radius: 3px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #3c3c3c;
          cursor: pointer;
          i {
            color: #0497e6;
            margin-left: 3px;
          }
          &:hover {
            background-color: #e3f4fd;
            color: #0497e6;
          }
        }
        .sortList {
          width: 80px;
          // display: none;
          height: 0px;
          overflow: hidden;
          background-color: white;
          transition: all 100ms ease-in-out 0s;
          box-shadow: 0 0 15px #cccccc;
          border-radius: 5px;
          position: absolute;
          top: 30px;
          // padding: 10px 0;
          li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #3c3c3c;
            text-align: center;
            cursor: pointer;
            &:hover {
              background-color: #e3f4fd;
              color: #0497e6;
            }
          }
        }
        .addFile {
          cursor: pointer;
          i {
            color: #0497e6;
            font-size: 20px;
          }
          &:hover {
            background-color: #e3f4fd;
          }
        }
      }
    }
    // margin-top: 120px;
    .fileList {
      display: flex;
      flex-direction: row;
      // justify-content: center;
      // 自动换行
      flex-wrap: wrap;
      overflow: auto;
      margin-bottom: 50px;
      align-content: flex-start;
      &::-webkit-scrollbar {
        display: none;
      }

      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        margin: 50px 25px 0;
        width: 90px;
        height: 96px;
        padding: 10px 0;
        cursor: pointer;
        border: 1px solid #fff;
        transition: box-shadow 100ms linear 0s;
        div {
          display: flex;
          align-items: center;
        }
        .icon-biji {
          font-size: 60px;
          color: #0497e6;
        }
        .icon-thin-_notebook_p {
          font-size: 44px;
          color: #0497e6;
          padding: 8px 5px;
        }
        // 选中最后一个li，设置下外边距
        &:last-of-type {
          margin-bottom: 50px;
        }
        &:hover {
          background-color: #e3f4fd;
          border-radius: 10px;
          border: 1px solid #bfe6fd;
          box-shadow: 0 10px 10px #bfe6fd;
        }
      }
    }
  }
}
@media (max-width: 1024px) {
  #user {
    main {
      width: 100%;
    }
  }
}
@media (max-width: 820px) {
  #user {
    main {
      .navMain {
        .fileList {
          justify-content: center;
        }
      }
    }
  }
}
@media (max-width: 415px) {
  #user {
    main {
      .userNav {
        nav {
          ul {
            li {
              font-size: 12px;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>